<!--作者：靳晓璐-->
<template>
  <div>
    <Leftbar>
    </Leftbar>
    <headers_copy>

    </headers_copy>
    <div style="padding-left: 32px" class="hello">
      <h1>{{ msg }}</h1>
      <ul>
        <li><el-row :gutter="10">
          <el-col :span="1.5" offset="1" style="padding-top: 40px"><div class="grid-content bg-purple">
            <div class="block">
              <el-avatar shape="square" :size="70" src=iconurl>
                <img :src="iconurl">
              </el-avatar>
            </div>
          </div></el-col>
          <el-col :span="2" offset="1" style="padding-top: 72px"><div class="grid-content bg-purple-light">
            <a
                href="https://twitter.com/vuejs"
                target="_blank" style="text-decoration: none"
                v-if="!category"
            >学生
            </a>
            <a
                href="https://twitter.com/vuejs"
                target="_blank" style="text-decoration: none"
                v-if="category"
            >教师
            </a>


          </div></el-col>
          <el-col :span="3"offset="0" style="padding-top: 72px"><div class="grid-content bg-purple-light">
            <a
                href="https://twitter.com/vuejs"
                target="_blank" style="text-decoration: none"
            >姓名：{{username}}</a>
          </div></el-col>
          <el-col :span="1.5" offset="1" style="padding-top: 60px"><div class="grid-content bg-purple">
            <el-button type="primary"  icon="el-icon-edit" circle @click="dialogVisible = true"></el-button>

            <el-dialog
                title="修改头像："
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
              <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
            </el-dialog>
          </div></el-col>
        </el-row>
        </li>
        <br>
        <li><el-row :gutter="10">
          <el-col :span="7" offset="1" style="padding-top: 32px"><div class="grid-content bg-purple">
            <a
                href="https://twitter.com/vuejs"
                target="_blank" style="text-decoration: none"
            > 邮箱：
              {{email}}
            </a></div></el-col><div style="padding-top: 20px">
          <el-button type="primary"  icon="el-icon-edit" circle @click="open"></el-button>
        </div>
        </el-row>
        </li>
        <br>


      </ul>
    </div>
  </div>

</template>
<script>
import Leftbar from "../components/Leftbar";
import headers_copy from "@/components/headers_copy";
import request from "@/utils/request";
import QS from "qs";
import axios from "axios";
export default {
  name:"DashBoard",
  components: {
    Leftbar,
    headers_copy
  },
  data () {
    return {
      dialogVisible: false,
      squareUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      sizeList: ["medium"],
      uid:sessionStorage.getItem("uid"),
      username:'',
      iconurl:'',
      category:'',
      email:'',
      form:[],
      imageUrl: '',
      input: '',
    }
  },
  methods:{
    open() {
      this.$prompt('请输入修改邮箱', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value,

        });

        console.log(value)

        axios.post("http://47.107.40.143:8080//updateEmail",QS.stringify(
            {
              uid:sessionStorage.getItem("uid"),
              email:value

            })).then(res=>{
          console.log(res)
          window.location.reload()
        })
      })

          .catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    loaduserinfo(){
      request.get("http://47.107.40.143:8080/head",{params:{uid:this.uid}}).then(res =>{
        this.username = res.data[0].username
        this.iconurl=res.data[0].iconurl
        this.category=res.data[0].category
        this.email=res.data[0].email
        console.log(res)
        console.log('传到页面的数据为'+this.username)
        console.log('传到页面的数据为'+this.iconurl)
      })
    },
  },
  created() {
    this.loaduserinfo()
  }
}

</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 32px;
  color: #8c939d;
  width: 88px;
  height: 58px;
  line-height: 178px;
  text-align: center;
  padding-top: 30px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
ul {
  list-style-type: none;
  padding: 0%;
  padding-left: 100px;
}

a {
  color: #606266;
}

.bg-purple {
  background: Transparent;
}
.bg-purple-light {
  background: Transparent;
}

.grid-content {
  border-radius: 0px;
  min-height: 0px;

}
.hello{
  margin-left: 130px;
  margin-top: 20px;
}
</style>
